<template>
  <div class="receive-prize">
    <div class="content">
      <div class="header">
        <p class="header-text">Merci萌西烘培</p>
        <div class="header-image" @click="closeReceivePrize">
          <img src="../assets/img/shut-down-receivePrize.png" class="header-img">
        </div>
      </div>
      <div class="middle">
        <p class="title">100元优惠券</p>
        <a href="https://www.baidu.com" class="link">
        点击领取
        </a>
      </div>
      <div class="footer">
        <div class="prompt">
          <span class="prompt-dark">操作提示</span>
          <span class="prompt-light">点击领取按钮进行领取</span>
        </div>
        <div class="redemption-time">
          <span class="redemption-time-dark">兑奖时间</span>
          <span class="redemption-time-light">2018.04.19-2018.06.19</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReceivePrize',
  // data () {
  //   return {
  //     show: ''
  //   }
  // },
  // props: {
  //   receiveShow: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  // watch: {
  //   receiveShow () {
  //     this.show = this.receiveShow
  //   }
  // },
  // mounted () {
  //   this.show = this.receiveShow
  // }, 父组件传值，子组件根据值来显示与隐藏，另一种方式是父组件根据判断值，直接来决定子组件的显示与隐藏

  methods: {
    closeReceivePrize () {
      this.$emit('closeReceivePrize')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .receive-prize
    width 100%
    height 100%
    background-color #CCFFFF
    position fixed
    top 0
    left 0
    .content
      background-color #fff
      width 700px
      height 1100px
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      .header
        height 128px
        border-bottom 1px dashed #ccc
        display flex
        align-items center
        justify-content space-between
        .header-text
          font-size 24px
          color #ccc
          padding-left 30px
        .header-image
          width 64px
          height 64px
          margin-right 30px
          .header-img
            width 100%
            height auto
      .middle
        height 250px
        padding-top 20px
        display flex
        flex-direction column
        justify-content space-around
        align-items center
        border-bottom 1px dashed #ccc
        .title
          text-align center
          font-size 36px
          font-weight 600
        .link
          width 270px
          height 70px
          background url("../assets/img/gift-word.png") no-repeat
          background-size cover
          text-align center
          line-height 70px
          font-size 28px
          color #fff
      .footer
        height 140px
        border-bottom 1px dashed #ccc
        font-size 28px
        display flex
        flex-direction column
        justify-content space-around
        padding-left 30px
        .prompt
          .prompt-dark
            font-weight 600
          .prompt-light
            color #ccc
            margin-left 20px
        .redemption-time
          .redemption-time-dark
            font-weight 600
          .redemption-time-light
            color #ccc
            margin-left 20px
</style>
